<script setup>
import useTable from "@/utils/useTable";
import { ref } from "vue";
import {http} from "@/api";
const staffList = ref([])
http.Staff.list({
  is_all: 1
}).then(res => {
  staffList.value = res.data
})
/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
  reset,
  openAdd,
  openEdit,
  openDelete,
  updateStatus,
} = useTable({
  requestFn: http.staffBalance,
  routerPre: 'staffBalance',
  params: {
    type: '1'
  }
})
const audit = (row, status) => {
  http.staffBalance.audit({
    id: row.id,
    status
  }).then(() => {
    search()
  })
}
</script>


<template>
  <PageMain title="提现流程">
    <el-tabs v-model="searchParams.type" @tab-change="search">
      <el-tab-pane label="订单流水" name="1" />
      <el-tab-pane label="提现流水" name="2" />
    </el-tabs>
    <el-form label-suffix="：" inline>
      <el-form-item label="阿姨">
        <el-select style="width: 180px" filterable v-model="searchParams.staff_id">
          <el-option
              v-for="item in staffList"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table-box">
      <el-table :data="dataSource">
        <el-table-column label="阿姨名称" prop="staff.nickname" />
        <el-table-column label="阿姨电话" prop="staff.phone" />
        <el-table-column :label="searchParams.type == 1? '订单金额' : '提现金额'" prop="amount" >
          <template #default="{ row }">
            {{ row.amount }}元
          </template>
        </el-table-column>
        <el-table-column label="提现状态" prop="status" v-if="searchParams.type == 2">
          <template #default="{ row }">
            <el-tag type="info" v-if="row.status === 0">待审核</el-tag>
            <el-tag type="success" v-if="row.status === 1">已通过</el-tag>
            <el-tag type="danger" v-if="row.status === 2">提现失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" v-if="scope.row.status === 0" @click="audit(scope.row, 1)">通过</el-button>
            <el-button type="text" style="color: red" v-if="scope.row.status === 0" @click="audit(scope.row, 2)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 50, 100, 200]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changeSize"
          @current-change="changePage"
      />
    </div>
  </PageMain>
</template>

<style scoped lang="scss">

</style>
